<template>
  <div class="partner-station-form">
    <a-form
      ref="formRef"
      :model="form"
      :label-col-props="{ span: 6 }"
      :wrapper-col-props="{ span: 18 }"
      label-align="right"
    >
      <a-form-item
        field="partnerId"
        label="运营商"
        :rules="[{ required: true, message: '请选择运营商' }]"
      >
        <a-select
          v-model="form.partnerId"
          :placeholder="$t('请选择运营商')"
          :loading="partnerLoading"
          allow-clear
        >
          <a-option 
            v-for="item in partnerOptions" 
            :key="item.value" 
            :value="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      
      <a-form-item
        field="stationId"
        label="充电站点"
        :rules="[{ required: true, message: '请选择充电站点' }]"
      >
        <a-select
          v-model="form.stationId"
          :placeholder="$t('请选择充电站点')"
          :loading="stationLoading"
          allow-clear
        >
          <a-option 
            v-for="item in stationOptions" 
            :key="item.value" 
            :value="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      
      <a-form-item
        field="relationType"
        label="关联类型"
        :rules="[{ required: true, message: '请选择关联类型' }]"
      >
        <a-radio-group v-model="form.relationType">
          <a-radio :value="RelationTypeEnum.NORMAL">普通关联</a-radio>
          <a-radio :value="RelationTypeEnum.EXCLUSIVE">独家代理</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { 
  getPartnerOptions, 
  getStationOptions,
  addPartnerStation,
  RelationTypeEnum 
} from '@/api/partnerStation';

const formRef = ref();
const form = reactive({
  partnerId: undefined as number | undefined,
  stationId: undefined as number | undefined,
  relationType: RelationTypeEnum.NORMAL,
});

// 下拉选项
const partnerOptions = ref<{ label: string; value: number }[]>([]);
const stationOptions = ref<{ label: string; value: number }[]>([]);

// 加载状态
const partnerLoading = ref(false);
const stationLoading = ref(false);

// 加载运营商选项
async function loadPartnerOptions() {
  partnerLoading.value = true;
  try {
    const res = await getPartnerOptions();
    if (res.data) {
      partnerOptions.value = res.data.map((item: any) => ({
        label: item.partnerName,
        value: item.id
      }));
    }
  } catch (error) {
    console.error('获取运营商选项失败:', error);
    Message.error('获取运营商选项失败');
  } finally {
    partnerLoading.value = false;
  }
}

// 加载站点选项
async function loadStationOptions() {
  stationLoading.value = true;
  try {
    const res = await getStationOptions();
    if (res.data) {
      stationOptions.value = res.data.map((item: any) => ({
        label: item.stationName,
        value: item.id
      }));
    }
  } catch (error) {
    console.error('获取站点选项失败:', error);
    Message.error('获取站点选项失败');
  } finally {
    stationLoading.value = false;
  }
}

// 验证表单
function validate() {
  return new Promise((resolve) => {
    formRef.value.validate((errors: any) => {
      if (errors) {
        console.log('表单验证失败:', errors);
        resolve(false);
      } else {
        console.log('表单验证通过');
        resolve(true);
      }
    });
  });
}

// 提交表单
async function submit() {
  try {
    const data = {
      partnerId: form.partnerId as number,
      stationId: form.stationId as number,
      relationType: form.relationType,
    };
    
    await addPartnerStation(data);
    return true;
  } catch (error) {
    console.error('添加关联失败:', error);
    return false;
  }
}

// 重置表单
function resetForm() {
  form.partnerId = undefined;
  form.stationId = undefined;
  form.relationType = RelationTypeEnum.NORMAL;
  formRef.value && formRef.value.resetFields();
}

// 初始加载
onMounted(async () => {
  await Promise.all([
    loadPartnerOptions(),
    loadStationOptions(),
  ]);
});

// 暴露组件方法
defineExpose({
  validate,
  submit,
  resetForm,
});
</script>

<style scoped lang="less">
.partner-station-form {
  padding: 16px 0;
}
</style> 